<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script>
        // 在Vue原型上扩展了对象 $state
        // 对被定义在vue原型上，所以该对象可以被所有vue实例直接访问
        // vue定义可以被实例直接访问的属性和方法叫做，实例属性和方法，语法中统一以$开头
        Vue.prototype.$state = Vue.observable({
            msg: "字符串",
            count: 1,
            arr: [1, 2, 3],
            user: {
                name: "tom"
            }
        });
    </script>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <p>msg:{{ msg }}</p>
        <input type="button" value="修改msg" @click="setMsg()">
        <p>count:{{ count }}</p>
        <input type="number" v-model.number="count">
        <hr>
        <comp-a></comp-a>
    </div>
    <template id="tempa">
        <div>
            <h3>子组件</h3>
            <p>msg:{{ msg }}</p>
            <p>count:{{ count }}</p>
            <input type="number" v-model.number="count">
        </div>
    </template>
</body>
<script>
    new Vue({
        el: '#app',
        computed: {
            msg() {
                return this.$state.msg;
            },
            count: {
                get() {
                    return this.$state.count;
                },
                set(nv) {
                    this.$state.count = nv;
                }
            }
        },
        methods: {
            setMsg() {
                this.$state.msg = "重新复制"
            }
        },
        mounted() {
            console.log(this);
        },
        components: {
            CompA: {
                template: "#tempa",
                computed: {
                    msg() {
                        return this.$state.msg;
                    },
                    count: {
                        get() {
                            return this.$state.count;
                        },
                        set(nv) {
                            this.$state.count = nv;
                        }
                    }
                },
            }
        }
    });
</script>

</html>